<template>
	<div class="index">
		<header :style="{'background-image':'none','background-color':skinColor}">
			<a href="location.html" class="location">西安市</a>
			<h1 class="logoIcon" style="font-size:.85rem;">&#35;</h1>
			<a href="search.html" class="rt_searchIcon">&#37;</a>
		</header>
		<div id="slide">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="#">
						<img src="static/upload/slide001.jpg" />
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="static/upload/slide002.jpg" />
					</a>
				</div>
			</div>
			<div class="pagination"></div>
		</div>
		<!-- 宫格栏 -->
		<ul class="categoryLiIcon">
			<li  v-for="item in homeGridList">
				<a href="javascript:;">
					<img :src="item.iconUrl">
					<em>{{item.name}}</em>
				</a>

			</li>
		</ul>
		<!-- 宫格栏 end -->
		<dl class="tab_proList">
			<dt>
				<ul>
					<li tag="a" @click="fillterType(type.id)" :class='{active:curType==type.id}' v-for="type in fillterTypeList">
						{{type.name}}
					</li>
				</ul>
			</dt>
			<product-list :productList="productList" :loading="loading"></product-list>
		</dl>
		<!--floatCart-->
		<div class="hoverCart">
			<a href="javascript:;" @click="$router.push('cart')">{{addGoodsNum}}</a>
		</div>
		<div style="height:1.2rem;"></div>
		<div class="loading-mask" v-if="!productList.length">
			<div class="mui-loading">正在加载...</div>
		</div>
	</div>
</template>

<script>
	import store from "@/store/index.js";
	import data from '@/data/data.js';
	import productList from 'components/ProductList.vue'
	import Swiper from "swiper";
	export default {
		data() {
			return {
				homeGridList: [],
				productList: [],
				cartList: [],
				curType: 0,
				loading: false,
				page: 0,
				fillterTypeList: [{
					id: 0,
					name: '尝鲜'
				}, {
					id: 1,
					name: '热门'
				}, {
					id: 2,
					name: '促销'
				}]
			};
		},
		components: {
			productList
		},
		computed: {
			addGoodsNum(){
				return this.$store.getters.addGoodsNum;
			},
			skinColor() {
				return store.state.skinColor;
			}
		},
		created(){
		},
		mounted() {
			this.homeGridList = data.categoryList;
			this.productList = data.productList[this.curType].dataList;
			this.$nextTick(() => {
				new Swiper("#slide", {
					loop: true,
					autoplay: true
				});
			});
			this.handleScroll();
		},
		methods: {
			
			fillterType(typeId) {
				this.curType = typeId;
				this.page = 0;
				this.productList = data.productList[this.curType].dataList;
			},
			handleScroll() {
				var that = this;
				that.loading = true;
				window.onscroll = function() {
					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
					var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
					if (scrollTop + windowHeight == scrollHeight) {
						if (that.page == 2) {
							that.loading = false;
							return;
						} else {
							that.page++;
							that.loading = true;
							var dataList = data.productList[that.page].dataList;
							that.productList = that.productList.concat(dataList);
						}
					}
				}
			}
		},


	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		background: rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;

	}


	.loading-mask .mui-loading {}
</style>
